<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/bullet.css">
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css">
    <title>企业logo弹窗</title>
</head>

<body>
<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" style="width:880px;">
        <div class="modal-content radius">
            <div class="modal-header">
                <h3 class="modal-title">企业logo编辑</h3>
                <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:;">×</a>
            </div>
            <div class="modal-body modal-center">
                <div class="main">
                    <div class="mainLeft" align="center">
                        <span>要求：请使用真实企业图片，图片格式支持JPG,JPEG,GIF,PNG，支持5M 以内的图片</span>
                        <div class="background" >
                            <form name="form" id="uploadImgForm" class="form-horizontal" method="post" enctype="multipart/form-data">
                                <!--<img src="../../img/add_img.png"> -->
                                <img id = "faceId" src="../../img/adminImg.png" class="jcrop-preview">
                                <div class="modal-body text-center">
                                    <div class="zxx_main_con">
                                            <a href="javascript:;" class="file"><input class="photo-file" type="file" name="file" id="fcupload"  onchange="readURL(this);" />选择图片</a>
                                        <div class="zxx_test_list">
											<input type="hidden" name="isNeetCut" value="10">
											<!-- 图片长宽高隐藏域 -->
											<input type="hidden" id="x" name="x" />
											<input type="hidden" id="y" name="y" />
											<input type="hidden" id="w" name="w" />
											<input type="hidden" id="h" name="h" />
											<input type="hidden" id="boundx" name="boundx" >
											<input type="hidden" id="boundy" name="boundy" >
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                    <div class="mainRight" align="center">
                        <span class="effect">效果预览</span><br>
                        <span class="px">100*100像素</span>
                        <div class="background" >
                             <div id = "preview_box">
								<img id = "lookId" src="../../img/adminImg.png" class="jcrop-preview">
							</div>

                        </div>
                        <input type="button" id="save" value="确定上传" class="selectPic">
						
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js?rev=@@hash"></script>
<script src="js/jquery.Jcrop.js?rev=@@hash"></script>
<script src="js/jquery-form.js?rev=@@hash"></script>
<script type="text/javascript">
    /* jcrop对象，全局变量方便操作 */
    var api = null;
    /* 原图宽度 */
    var boundx;
    /* 原图高度 */
    var boundy;
    /* 选择图片事件 */
    function readURL(URL){
        var reader = new FileReader();
        reader.readAsDataURL(URL.files[0]);
        reader.onload = function(e){
            $("#faceId").removeAttr("src");
            $("#lookId").removeAttr("src");
            $("#faceId").attr("src",e.target.result);
            $("#lookId").attr("src",e.target.result);
            $("#faceId").Jcrop({
				setSelect: [ 20, 20, 200, 200 ],
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1,
                boxWidth:600
            },function(){
                // Use the API to get the real image size
                //使用API来获得真实的图像大小
                var bounds = this.getBounds();
                boundx = bounds[0];
                boundy = bounds[1];
                // Store the API in the jcrop_api variable
                //jcrop_api变量中存储API
                api = this;

                $("#boundx").val(boundx);
                $("#boundy").val(boundy);

            });
        };
        /* 移除jcrop */
        if (api != undefined) {
            api.destroy();
        }

        //简单的事件处理程序，响应自onChange,onSelect事件，按照上面的Jcrop调用
        function showPreview(coords){
            /* 设置剪切参数 */
            $("#x").val(coords.x);
            $("#y").val(coords.y);
            $("#w").val(coords.w);
            $("#h").val(coords.h);
            if(parseInt(coords.w) > 0){
                //计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
                var rx = $("#preview_box").width() / coords.w;
                var ry = $("#preview_box").height() / coords.h;
                $("#lookId").css({
                    width:Math.round(rx * $("#faceId").width()) + "px",    //预览图片宽度为计算比例值与原图片宽度的乘积
                    height:Math.round(rx * $("#faceId").height()) + "px",  //预览图片高度为计算比例值与原图片高度的乘积
                    marginLeft:"-" + Math.round(rx * coords.x) + "px",
                    marginTop:"-" + Math.round(ry * coords.y) + "px"
                });
            }
        }

    }

    $(function () {
        $('#save').click(function(){
            $('#uploadImgForm').ajaxSubmit({
                url:"http://192.168.65.115:8110/basicservice/upload",
                type:"post",  //提交方式
                success:function (data) {
                    alert(data);
                }
            })
        })


    })

</script>
</html>